<template>
  <transition name="el-fade-in">
    <div v-if="showTable">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="数据统计" name="数据统计">
          <div class="header-wrapper">
            <div style="padding: 12px; font-size: 14px">
              <p>
                <el-text>数据版本：{{ dataVersion }}</el-text>
                <el-divider direction="vertical" />
                <el-text>生成时间：{{ tableVersion }}</el-text>
              </p>
            </div>
          </div>
          <div class="table-wrapper">
            <el-table :data="summaryData" style="width: 100%; max-width: 720px">
              <el-table-column
                v-for="(item, key, index) in summaryData[0]"
                :label="
                  (key.includes('dep')
                    ? '离场架次'
                    : key.includes('arr')
                    ? '进场架次'
                    : key.includes('tot')
                    ? '合计架次'
                    : '') +
                  (key.includes('Real')
                    ? ' (实际)'
                    : key.includes('Plan')
                    ? ' (计划)'
                    : '')
                "
                :prop="key"
                align="center"
                :resizable="false"
              ></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="传统量表数据" name="量表数据">
          <div class="table-wrapper">
            <el-table
              :data="tableData"
              border
              stripe
              :height="maxTableHeight"
              style="width: 100%"
            >
              <el-table-column
                v-for="(item, key, index) in tableHeader"
                :label="item.label"
                :prop="item.prop"
                align="center"
                :min-width="item.column == -1 ? '90px' : '60px'"
                :fixed="item.column == -1"
                :resizable="false"
              ></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </transition>
</template>

<script setup>
import { ref, computed, nextTick, watch } from "vue";
import useFlowStore from "@/store/flow.js";
import useCommonStore from "@/store/common.js";
import dayjs from "dayjs";

const flowStore = useFlowStore();
const commonStore = useCommonStore();

const maxTableHeight = computed(() => commonStore.clientHeight - 200);

const showTable = computed(() => flowStore.classicPolicyScales != null);
const activeTab = ref("数据统计");

const targetDate = computed(() => {
  if (!showTable.value) {
    return null;
  } else {
    return flowStore.classicPolicyScales.targetDate;
  }
});

const dataVersion = computed(() =>
  showTable.value
    ? dayjs(flowStore.classicPolicyScales.version).format("YYYY-MM-DD HH:mm:ss")
    : ""
);

const tableVersion = computed(() =>
  showTable.value ? dayjs().format("YYYY-MM-DD HH:mm:ss") : ""
);

const tableData = computed(() =>
  showTable.value ? flowStore.classicPolicyScales.hourly.tableHourlyData : []
);

const tableHeader = computed(() =>
  showTable.value ? flowStore.classicPolicyScales.hourly.tableHourlyHeader : []
);

const summaryData = computed(() =>
  showTable.value ? flowStore.classicPolicyScales.summary : []
);

watch(showTable, (oldValue, newValue) => {
  activeTab.value = "数据统计";
});
</script>

<style scoped>
.header-wrapper {
  width: 100%;
  padding: 12px 24px 24px 12px;
  text-align: center;
}

.table-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
